@page
@{ Layout = "_LayoutApp"; }

<div class="card smooth-shadow-lg mb-3">
    <div class="rounded-top-3 bg-gradient-mix-shade" style="height: 128px">
    </div>
    <div class="card-body">
        <div class="d-flex flex-column">
            <div class="d-flex justify-content-between align-items-end  mt-n8">
                <h1>{{ user.displayName }}</h1>
                <img :src="user.avatarUrl || DEFAULT_AVATAR_URL" class="img-fluid rounded-pill smooth-shadow-lg avatar-xl bg-light p-2">
            </div>
            <div class="text-center">
                <div class="ms-2 text-center">
                    <div>累计考试<span class="text-gray-800 fw-bold mx-2">{{ examTotal }}</span>场</div>
                </div>
                <apexchart type="radialBar" :options="passChartOptions" :series="passSeries" height="300"></apexchart>
            </div>
            <div class="d-flex flex-column gap-5">
                <div class="d-flex flex-column gap-3">
                    <div class="d-flex flex-md-row flex-column gap-md-4 gap-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning align-baseline" viewBox="0 0 16 16">
                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                </svg>
                                模拟<span class="text-gray-800 fw-bold mx-2">{{ examMoniTotal }}</span>场
                            </span>
                            <span>
                                及格率<span class="text-gray-800 fw-bold mx-2">{{ examMoniPercent }}</span>%
                            </span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning align-baseline" viewBox="0 0 16 16">
                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                </svg>
                                刷题<span class="text-gray-800 fw-bold mx-2">{{ practiceAnswerTmTotal }}</span>道
                            </span>
                            <span>
                                正确率<span class="text-gray-800 fw-bold mx-2">{{ practiceAnswerPercent }}</span>%
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card card-hover-with-icon border-top border-5 border-primary p-0 mb-3">
    <el-card shadow="hover">
        <div slot="header" class="d-flex justify-content-between align-items-center">
            <span class=""><i class="el-icon-platform-eleme me-2 bg-light p-2 card-icon rounded-circle"></i>最近一场考试安排</span>
            <el-link :underline="false" v-on:click="btnExamMoreMenuClick">更多<i class="el-icon-more ms-2"></i></el-link>
        </div>
        <div class="row align-items-center g-3" v-if="examPaper">
            <div class="col">
                <div class="mb-3">
                    <el-link :underline="false" v-on:click="btnViewPaperClick(examPaper.id)">
                        <span class="fw-bold fs-4">{{ examPaper.title }}</span>
                    </el-link>
                </div>
                <div>
                    <div class="fs-5 fw-light">
                        <div class="mb-1"><i class="bi bi-dot me-2"></i>总分：{{examPaper.totalScore}}<span class="me-1"></span>及格分：{{examPaper.passScore}}</div>
                        <div class="mb-1">
                            <i class="bi bi-dot me-2"></i>考试次数：
                            <span class="text-success fw-bold" v-if="(examPaper.userExamTimes-examPaper.myExamTimes)>0">
                                {{examPaper.userExamTimes-examPaper.myExamTimes}}
                            </span>
                            <span class="fs-3 text-danger fw-bold" v-else>
                                0
                            </span>
                            /{{examPaper.userExamTimes}}
                        </div>
                        <div><i class="bi bi-dot me-2"></i>开考时间：{{ examPaper.examStartDateTimeStr }}</div>
                    </div>
                </div>
            </div>
            <div class="col-auto">
                <div class="bg-light p-2 rounded-circle">
                    <el-button type="primary" circle icon="el-icon-s-order" class="p-3" v-on:click="btnViewPaperClick(examPaper.id)"></el-button>
                </div>
            </div>
        </div>
        <div v-else>
            <el-empty></el-empty>
        </div>
    </el-card>
</div>
<div class="card shadow-lg border-top border-5 border-primary p-0 mb-3">
    <el-card>
        <div slot="header" class="d-flex justify-content-between align-items-center">
            <span>
                <i class="el-icon-s-order me-2 bg-light p-2 card-icon rounded-circle"></i>刷题练习
            </span>
            <el-link :underline="false" v-on:click="btnShuatiMoreMenuClick">更多<i class="el-icon-more ms-2"></i></el-link>
        </div>
        <div>
            <div class="row text-center fs-5">
                <div class="col p-3">
                    <div class="mb-3">
                        <el-progress type="dashboard" :percentage="practiceCollectPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                        <div>正确率</div>
                    </div>
                    <div class="mb-3 p-2 bg-light w-100 rounded-pill">
                        <el-button type="primary" class="py-3 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('Collect')"><i class="bi bi-person-hearts me-2"></i>收藏练习</el-button>
                    </div>
                    <div class="fw-light">共<span class="fw-bold mx-2">{{ practiceCollectTmTotal }}</span>道题</div>
                </div>
                <div class="col p-3">
                    <div class="mb-3">
                        <el-progress type="dashboard" :percentage="practiceWrongPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                        <div>正确率</div>
                    </div>
                    <div class="mb-3 p-2 bg-light w-100 rounded-pill">
                        <el-button type="success" class="py-3 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('Wrong')"><i class="bi bi-backspace-reverse me-2"></i>错题练习</el-button>
                    </div>
                    <div class="fw-light">共<span class="fw-bold mx-2">{{ practiceWrongTmTotal }}</span>道题</div>
                </div>
                <div class="col p-3">
                    <div class="mb-3">
                        <el-progress type="dashboard" :percentage="practiceAllPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                        <div>正确率</div>
                    </div>
                    <div class="mb-3 p-2 bg-light w-100 rounded-pill">
                        <el-button type="warning" class="py-3 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('All')"><i class="bi bi-fast-forward-circle-fill me-2"></i>快速开始</el-button>
                    </div>
                    <div class="fw-light">共<span class="fw-bold mx-2">{{ practiceAllTmTotal }}</span>道题</div>
                </div>
            </div>
        </div>
    </el-card>
</div>
<div class="card card-hover-with-icon border-top border-5 border-primary p-0 mb-3" style="cursor:default;">
    <el-card shadow="hover">
        <div slot="header" class="d-flex justify-content-between align-items-center">
            <span><i class="el-icon-eleme me-2 bg-light p-2 card-icon rounded-circle"></i>最新一场模拟自测</span>
            <el-link :underline="false" v-on:click="btnExamMoniMoreMenuClick">更多<i class="el-icon-more ms-2"></i></el-link>
        </div>
        <div class="row align-items-center g-3" v-if="examMoni">
            <div class="col">
                <div class="mb-3">
                    <el-link :underline="false" v-on:click="btnViewPaperClick(examMoni.id)">
                        <span class="fw-bold fs-4">{{ examMoni.title }}</span>
                    </el-link>
                </div>
                <div>
                    <div class="fs-5">
                        <div class="mb-1"><i class="bi bi-dot me-2"></i>总分：{{examMoni.totalScore}}<span class="me-1"></span>及格分：{{examMoni.passScore}}</div>
                        <div class="mb-1">
                            <i class="bi bi-dot me-2"></i>考试次数：
                            <span class="text-success fw-bold" v-if="(examMoni.userExamTimes-examMoni.myExamTimes)>0">
                                {{examMoni.userExamTimes-examMoni.myExamTimes}}
                            </span>
                            <span class="fs-3 text-danger fw-bold" v-else>
                                0
                            </span>
                            /{{examMoni.userExamTimes}}
                        </div>
                        <div><i class="bi bi-dot me-2"></i>开考时间：{{ examMoni.examStartDateTimeStr }}</div>
                    </div>
                </div>
            </div>
            <div class="col-auto">
                <div class="bg-light p-2 rounded-circle">
                    <el-button type="primary" icon="el-icon-s-order" class="fs-4 p-3" circle v-on:click="btnViewPaperClick(examMoni.id)"></el-button>
                </div>
            </div>
        </div>
        <div v-else>
            <el-empty></el-empty>
        </div>
    </el-card>
</div>
<div class="card card-hover-with-icon border-top border-5 border-primary p-0" style="cursor:default;">
    <el-card shadow="hover">
        <div class="mb-2 d-flex justify-content-start align-items-center">
            <el-avatar icon="el-icon-user-solid" :src="user.avatarUrl || DEFAULT_AVATAR_URL"></el-avatar>
            <div class="ms-2">
                <span>个人信息</span>
            </div>
        </div>
        <div>
            <el-descriptions title="" border column="2" direction="vertical">
                <el-descriptions-item label="账 号">{{ user.userName }}</el-descriptions-item>
                <el-descriptions-item label="姓 名">{{ user.displayName }}</el-descriptions-item>
                <el-descriptions-item label="组 织">{{ user.organNames }}</el-descriptions-item>
                <el-descriptions-item label="手 机">{{ user.mobile }}</el-descriptions-item>
                <el-descriptions-item label="邮 箱">{{ user.email }}</el-descriptions-item>
                <el-descriptions-item label="登录次数">{{ user.countOfLogin }}</el-descriptions-item>
            </el-descriptions>
        </div>
    </el-card>
</div>
<div class="my-5 text-center">
    <span class="fw-light mt-3 fs-6">没有更多了</span>
</div>
<div class="py-8"></div>
@await Html.PartialAsync("_PartialAppMenu")
<div style="position:fixed;right:5%;top:60%;" class="text-center opacity-75" v-if="taskTotal>0">
    <button type="button" class="btn btn-dark rounded py-3 px-2 text-center" v-on:click="taskDialogVisible=true">
        <div style="color: white;text-shadow: 0px 0px 10px #427ed1, 0px 0px 10px #427ed1;" class="fw-bold">{{ taskTotal }}</div>
        <div class="fw-light fs-6 text-warning">个</div>
        <div class="fw-light fs-6 text-warning">待</div>
        <div class="fw-light fs-6 text-warning">办</div>
    </button>
</div>
<template>
    <el-drawer title="待办"
               size="50%"
               :visible.sync="taskDialogVisible"
               direction="btt">
        <div class="text-center p-2">
            <div class="card">
                <div class="card-body">
                    <div class="mb-5" v-if="taskPaperTotal>0">
                        <div class="d-flex justify-content-between align-items-center" v-on:click="btnExamMoreMenuClick">
                            <span><i class="bi bi-star-half me-2 text-warning"></i>剩余<span class="text-danger mx-2">{{ taskPaperTotal }}</span>份试卷未参考</span>
                            <span><i class="el-icon-arrow-right"></i></span>
                        </div>
                    </div>
                    <div v-if="taskQTotal>0">
                        <div class="d-flex justify-content-between align-items-center" v-on:click="btnAppMenuClick('wenjuan')">
                            <span><i class="bi bi-star-half me-2 text-warning"></i>剩余<span class="text-danger mx-2">{{ taskQTotal }}</span>份问卷未填写</span>
                            <span><i class="el-icon-arrow-right"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>
@section Scripts{
    <script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/app/dashboard.js" type="text/javascript"></script> }